<template>
  <div class="m-istyle">
    <dl
      style="background: linear-gradient(to right, rgb(250, 60, 104) 2%, rgb(254, 70, 77) 97%) rgb(250, 60, 104);"
    >
      <dt style="color:#fff">猫眼电影</dt>
      <!--:class后面接一个对象，如果activeIndex==index为真，那class=active -->
      <dd
        :class="{active:activeIndex==index}"
        v-for="(item,index) in navList"
        :key="index"
        :kid="index"
        @mousemove="over(index)"
      >{{item}}</dd>
    </dl>
    <!-- <el-carousel id="all"> -->
      <!-- <el-carousel-item > -->
        <ul id="movie">
          <li v-for="(item,index) in movieList" :key="index" id="m-li">
            <el-card :body-style="{ padding: '0px' }" shadow="never" style="position: relative;">
              <img :src="item.src" />
              <div class="movieTitle">
                <p>
                  <span >{{item.number}}</span>
                  <span>人想看</span>
                </p>
                <p>{{item.m_title}}</p>
              </div>
            </el-card>
          </li>
        </ul>
      <!-- </el-carousel-item> -->
    <!-- </el-carousel> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: ["正在热映", "即将上映"],
      activeIndex: 0,
      movieList: [
        {
          src: "//p1.meituan.net/movie/c25d6d95917cd60585fe212d8df377472614771.jpg@267w_371h_1e_1c",
          number:168,
          m_title:'出走的马蹄'
        },{
            src: "//p1.meituan.net/movie/d09014103dd467babc1f6ecaf607a9511579477.jpg@267w_371h_1e_1c",
            number:195,
            m_title:'咋们春来了贴心人'
        },{
            src: "//p1.meituan.net/movie/4027ab12e2e618d627f761e6433d3c291885261.jpg@267w_371h_1e_1c",
            number:19342,
            m_title:'通往春天的列车'
        },{
            src: "//p1.meituan.net/movie/374f7addeb978a634b0f5e8665f0bce4357962.jpg@267w_371h_1e_1c",
            number:11033,
            m_title:'麦路人'
          },{
             src: "//p0.meituan.net/movie/739ab80ef2dee3ec234b6ba75baf90e01951569.jpg@267w_371h_1e_1c",
             number:6769,
             m_title:'死无对证'  
          }
      ],
    };
  },
  methods: {
    over(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped>
img {
  height: 297px;
}
#movie {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  width: 100%;
  /* height: 297px; */
  padding: 11px 10px 10px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-sizing: border-box;
}
#movie > #m-li {
  width: 20%;
  height: 297px;
  padding: 5px 10px;
  box-sizing: border-box;
  float: left;
  transition: background-color 0.5s;
  height: 314px;
}
.movieTitle {
  position: absolute;
  width: 100%;
  height: 100px;
  left: 0;
  bottom: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-image: linear-gradient(
    -180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(29, 45, 55, 0.8) 99%
  );
}
.movieTitle > p {
  color: #fff;
}
.movieTitle p:nth-child(1) {
  font-size: 12px;
  margin-top: 48px;
  padding-left: 10px;
  font-weight: 500;
}
.movieTitle p:nth-child(2) {
  text-align: left;
  color: #fff;
  padding-left: 10px;
  font-size: 16px;
  white-space: nowrap;
  width: 6em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.movieTitle p:nth-child(1) span:nth-child(1) {
  font-size: 16px;
  color: #fd9827;
  font-weight: 500;
}
#all{
    height: 320px;
}
</style>